import * as THREE from "three";
import mapboxgl from "mapbox-gl";

export let loadCylinder = (lng, lat, map) => {
    const modelOrigin = [lng, lat]
    var modelAltitude = 0;
    var modelRotate = [Math.PI / 2, 0, 0];
    var modelScale = 5.41843220338983e-8;
    let modelTransform = {
        translateX: mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).x,
        translateY: mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).y,
        translateZ: mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).z,
        rotateX: modelRotate[0],
        rotateY: modelRotate[1],
        rotateZ: modelRotate[2],
        scale: modelScale
    };

    var customLayer = {
        id: '3dmodel',
        type: 'custom',
        renderingMode: '3d',
        onAdd: function (map, gl) {
            var height = 20; // 圆柱体高度，可以根据需要调整
            var radiusInMeters = 5000; // 半径5km
            // 添加圆柱体形状
            let cylinder = new THREE.CylinderGeometry( 50, 50, 200, 32 );
            // 添加材质
            var materials = new THREE.MeshBasicMaterial({
                color: '#fdff6e',
                side: THREE.DoubleSide,
            });
            var cylinderMesh = new THREE.Mesh(cylinder, materials);

            // 创建
            this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            // 创建场景
            this.scene = new THREE.Scene();
            // 创建光线
            this.directionalLight = new THREE.DirectionalLight(0xffffff);
            this.directionalLight.position.set(0, -50, 100).normalize();
            this.scene.add(this.directionalLight);

            // gltf加载器
            this.scene.add(cylinderMesh);
            // s获取Mapbox GL JS map canvas到three.js中
            this.map = map;
            this.renderer = new THREE.WebGLRenderer({
                canvas: this.map.getCanvas(),
                context: gl,
            });
            this.renderer.autoClear = false;
        },
        render: function (gl, matrix) {
            // 矩阵坐标转换
            var rotationX = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), modelTransform.rotateX);
            var rotationY = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 1, 0), modelTransform.rotateY);
            var rotationZ = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 0, 1), modelTransform.rotateZ);

            var m = new THREE.Matrix4().fromArray(matrix);
            var l = new THREE.Matrix4().makeTranslation(modelTransform.translateX, modelTransform.translateY, modelTransform.translateZ)
                .scale(new THREE.Vector3(modelTransform.scale, -modelTransform.scale, modelTransform.scale))
                .multiply(rotationX)
                .multiply(rotationY)
                .multiply(rotationZ);

            this.camera.projectionMatrix.elements = matrix;
            this.camera.projectionMatrix = m.multiply(l);
            this.renderer.state.reset();
            this.renderer.render(this.scene, this.camera);
            //渲染
            this.map.triggerRepaint();
        }
    };
    map.on('load', () => {
        map.addLayer(customLayer)
    })
}

